<template>
  <div class="padding">
    <div class="course_type">
      <el-button type="text" @click="checkType(1)" :class="params.sortType==1?'check_btn':''">默认</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text" @click="checkType(2)" :class="params.sortType==2?'check_btn':''">最新</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text" @click="checkType(3)" :class="params.sortType==3?'check_btn':''">最热</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-tooltip class="item" effect="dark" content="重置搜索" placement="top">
        <el-button
          type="text"
          style="margin-left: 10px; color:#409eff;"
          icon="el-icon-refresh"
          @click="reload"
        />
      </el-tooltip>

      <!-- 搜索 -->
      <div class="search">
        <el-input v-model="params.searchValue" placeholder="搜索课程" prefix-icon="el-icon-search">
          <el-button type="primary" slot="append" icon="el-icon-search" @click="searchCourse"></el-button>
        </el-input>
      </div>
    </div>
    <course-list :courseList="list" @click="toDetail" />

    <el-empty v-show="total==0" />
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getList"
      style="margin-top: 40px"
    />
  </div>
</template>

<script>
import CourseList from "../Personal/child/comp/CourseList";
import Pagination from "@/components/Pagination";
import { getCourseHistoryById } from "@/api/course";
import { getPubCourseList as getList } from "@/api/course";

export default {
  components: {
    CourseList,
    Pagination
  },
  data() {
    return {
      list: [],
      params: {
        pageNum: 1,
        pageSize: 8,
        sortType: 1,
        searchValue: null
      },
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await getList(this.params);
      if (res.code == 200) {
        this.list = res.data.rows;
        this.total = res.data.total;
      }
    },
    reload() {
      this.params.pageNum = 1;
      this.params.searchValue = null;
      this.params.sortType = 1;
      this.getList();
    },
    checkType(type) {
      if (type !== this.params.sortType) {
        this.params.sortType = type;
        this.getList();
      }
    },
    searchCourse() {
      if (this.params.searchValue !== null && this.params.searchValue !== "") {
        this.getList();
      }
    },
    // 课程详情
    toDetail(id) {
      getCourseHistoryById(id).then(res => {
        const result = res.data;
        const { href } = this.$router.resolve({
          path: "/course",
          query: {
            courseId: id,
            chapterId: result.chapterId,
            videoId: result.videoId
          }
        });
        window.open(href, "_blank");
      });
    }
  }
};
</script>

<style scoped>
.padding {
  padding: 0 10%;
}
.course_type {
  padding: 30px 0 0 60px;
}
.course_type .check_btn {
  color: #409eff;
}
.course_type button {
  font-size: 18px;
  color: gray;
}

.course_type .search {
  display: block;
  float: right;
  padding-right: 30px;
  margin-right: 15px;
  color: white;
}


.course_type .search .el-button {
  background-color: #409eff;
  border-radius: 0 4px 4px 0;
  border: 1px solid #409eff;
  color: white;
  font-size: 14px;
}

.course_type .search .el-button:hover {
  transform: scale(1.05);
  transition: all 0.2s;
}
</style>
